<template>
  <div class="wrap">
    <p class="title">画廊组件</p>
    <div class="pic" v-for="(item, index) in imgList" :key="index" @click="() => preImg(index)">
      <img :src="item" alt="">
    </div>
    <gallery :visible="visible" :initIndex="initIndex" :imgList="imgList" :closeCallback="closeCallback"></gallery>
  </div>
</template>

<script>
import { Gallery } from '$root/components'
// import { Gallery } from '../../dist/tcfe-helper.js';

export default {
  name: 'el-gallery',
  data() {
    return {
      imgList: [
        '//daily-academy.oss-cn-hangzhou.aliyuncs.com/hupanWeb/homepage/img/banner_1.jpg',
        '//daily-academy.oss-cn-hangzhou.aliyuncs.com/hupanWeb/homepage/img/banner_2.jpg',
        '//daily-academy.oss-cn-hangzhou.aliyuncs.com/hupanWeb/homepage/img/banner_5.jpg',
        '//daily-academy.oss-cn-hangzhou.aliyuncs.com/hupanWeb/homepage/img/banner_4.jpg',
        '//daily-academy.oss-cn-hangzhou.aliyuncs.com/hupanWeb/homepage/img/banner8.jpg',
        '//daily-academy.oss-cn-hangzhou.aliyuncs.com/hupanWeb/homepage/img/banner9.jpg',
        '//daily-academy.oss-cn-hangzhou.aliyuncs.com/hupanWeb/homepage/img/banner10.jpg'
      ],
      visible: false,
      initIndex: 0
    }
  },
  methods: {
    preImg(idx) {
      this.initIndex = idx
      this.visible = true
    },
    closeCallback() {
      this.visible = false
    }
  },
  components: {
    Gallery
  }
}
</script>

<style lang="less" scoped>
@import '~$common/funs.less';
.wrap {
  height: 100%;
  .title {
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    margin: 40px auto;
  }
  padding: 8px;
  .pic {
    display: inline-block;
    .-square-box(160px);
    margin: 10px;
    border: none;
    border-radius: 20px;
    position: relative;
    img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
